<template>
  <div class="flex flex-col h-full">
    <ds-title v-if="title" :title="title" :alias="alias"/>
    <div class="relative flex h-full items-center justify-center">
      <ds-spin v-if="dsLoading" />
      <div class="ds-chart z-10 absolute inset-0" :class="[dsLoading ? 'opacity-0' : 'opacity-100']" ref="dsChart"></div>
    </div>
  </div>
</template>

<script lang="ts">
import HTTP from '../apis';
import MAP_CHINA from '../assets/js/map.china';
import DEFAULT_OPTION from '../assets/data/defaultOption';
import merge from 'lodash/merge';
import {ref, defineComponent, onMounted, computed, inject} from 'vue';

import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components';
import {BarChart, LineChart, PieChart, MapChart, RadarChart, EffectScatterChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import DsTitle from './DsTitle.vue';
import {Emitter} from 'mitt';
import DsSpin from "./DsSpin.vue";

type DsChart = echarts.ECharts
echarts.use(
    [
      LineChart,
      BarChart,
      MapChart,
      RadarChart,
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      VisualMapComponent,
      LegendComponent,
      GridComponent,
      PieChart,
      EffectScatterChart,
      CanvasRenderer
    ]
);

export default defineComponent({
  name: 'DsChart',
  components: {DsSpin, DsTitle},
  props: {
    option: {
      type: Object,
      default() {
        return {};
      }
    },
    query: {
      type: Object,
      default() {
        return {};
      }
    },
    mode: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    alias: {
      type: String,
      default: ''
    },
    endpoint: {
      type: String,
      default: ''
    }
  },
  setup: (props, context) => {
    let r: any, init = true;
    const {mode, query, option} = props;
    const emitter = inject<Emitter>('Emitter');
    const {endpoint, translate, color} = inject<any>('Config');
    const url = props.endpoint || endpoint;
    const dsLoading = ref<boolean>(null);
    const dsChart = ref<HTMLElement>();
    const getChartData = async (fn?: Function) => {
      if (init) {
        dsLoading.value = true
      }
      r = await HTTP.get(url, {
        params: query
      });
      if (r && r.data.code === 0) {
        dsLoading.value = false
        r.data.data.option = merge(r.data.data.option, option);
        fn && fn()
      }
    };
    if (mode === 'map') {
      echarts.registerMap('china', MAP_CHINA);
    }
    onMounted(async () => {
      let chart: DsChart
      if (dsChart.value) {
        endpoint && await getChartData();
        init = false
        chart = echarts.init(dsChart.value, color.length ? { color } : {}, {locale: 'ZH'});
        chart.setOption(endpoint ? (r && r.data.data.option) : DEFAULT_OPTION[mode]);
        if (mode === 'map') {
          let index = 0;
          // setInterval(() => {
          //   chart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0,
          //     dataIndex: index
          //   });
          //   chart.dispatchAction({
          //     type: 'select',
          //     seriesIndex: 0,
          //     dataIndex: index
          //   });
          //   index++;
          //   if (index > r.data.data.option.series[0].data.length - 1) {
          //     index = 0;
          //   }
          // }, 2000);
        }
        emitter?.on('update', () => {
          getChartData(() => {
            chart.setOption((r && r.data.data.option) || DEFAULT_OPTION[mode]);
          });
        });
        addEventListener('resize', () => {
          chart.resize()
        })
      }
    });
    return {
      dsChart,
      dsLoading,
    };
  }
});
</script>
